<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 10px">
      <el-breadcrumb-item :to="{ path: '/AdminHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片容器 -->
    <el-card id="personal-info-card" style="margin: 15px; min-height: calc(100vh - 111px);">
      <div style="display: flex; justify-content: center;">
        <div style="width: 600px; margin-left: 30px; position: relative">

          <!-- 用户信息展示 -->
          <div style="margin: 20px 0;">
            <h3 class="personal-info-title" style="margin-bottom: 30px; color: #333;font-size: 30px;">👤 个人信息</h3>
            <div style="display: flex; flex-wrap: wrap; gap: 20px;">

              <!-- 管理员ID -->
              <el-card shadow="hover" style="width: calc(50% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; user-select: none;">
                <div style="display: flex; align-items: center;">
                  <i class="el-icon-user" style="margin-right: 10px; color: #409EFF;"></i>
                  <div style="position: relative; flex: 1;">
                    <strong>管理员ID</strong>
                    <span style="margin-left: 10px; display: block;">{{ adminId }}</span>
                    <el-icon style="position: absolute; right: 0; top: 0;">
                      <User />
                    </el-icon>
                  </div>
                </div>
              </el-card>

              <!-- 用户名 -->
              <el-card shadow="hover" style="width: calc(50% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; user-select: none;">
                <div style="display: flex; align-items: center;">
                  <i class="el-icon-document" style="margin-right: 10px; color: #409EFF;"></i>
                  <div style="position: relative; flex: 1;">
                    <strong>用户名</strong>
                    <span style="margin-left: 10px; display: block;">{{ username }}</span>
                    <el-icon style="position: absolute; right: 0; top: 0;">
                      <UserFilled />
                    </el-icon>
                  </div>
                </div>
              </el-card>

              <!-- 手机号 -->
              <el-card shadow="hover" style="width: calc(50% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; user-select: none;">
                <div style="display: flex; align-items: center;">
                  <i class="el-icon-phone" style="margin-right: 10px; color: #409EFF;"></i>
                  <div style="position: relative; flex: 1;">
                    <strong>手机号</strong>
                    <span style="margin-left: 10px; display: block;">{{ phone }}</span>
                    <el-icon style="position: absolute; right: 0; top: 0;">
                      <Iphone />
                    </el-icon>
                  </div>
                </div>
              </el-card>

              <!-- 邮箱 -->
              <el-card shadow="hover" style="width: calc(50% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; user-select: none;">
                <div style="display: flex; align-items: center;">
                  <i class="el-icon-message" style="margin-right: 10px; color: #409EFF;"></i>
                  <div style="position: relative; flex: 1;">
                    <strong>邮箱</strong>
                    <span style="margin-left: 10px; display: block;">{{ email }}</span>
                    <el-icon style="position: absolute; right: 0; top: 0;">
                      <Message />
                    </el-icon>
                  </div>
                </div>
              </el-card>

            </div>
          </div>

          <!-- 修改按钮 -->
          <el-tooltip content="修改信息" placement="bottom">
            <el-button
              icon="Edit"
              size="large"
              type="primary"
              style="
                margin-top: 30px;
                width: 80px;
                transition: transform 0.2s ease;
              "
              @click="Edit"
              @mouseenter.native="e => e.target.style.transform = 'scale(1.1)'"
              @mouseleave.native="e => e.target.style.transform = 'scale(1)'"
            >
            </el-button>
          </el-tooltip>

        </div>
      </div>
    </el-card>

    <!-- 修改信息弹窗 -->
    <el-dialog v-model="dialogVisible" title="操作" width="30%" @close="resetForm">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="管理员ID" prop="adminId">
          <el-input v-model="form.adminId" disabled style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" :disabled="disabled" show-password style="width: 80%"></el-input>
          <el-tooltip content="修改密码" placement="right">
            <el-icon size="large" style="margin-left: 5px; cursor: pointer" @click="EditPass">
              <edit />
            </el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass" :style="display">
          <el-input v-model="form.checkPass" show-password style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.number="form.phone" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="form.email" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script src="@/assets/js/AdminSelfInfo.js">
</script>

<style scoped>


.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
}

.personal-info-title {
  font-size: 30px;
}

.dialog-footer button {
  margin-left: 10px;
}
</style>